<template>
  <el-dialog
    :visible.sync="dialogFormVisible"
    :before-close="closeDialog"
    :close-on-click-modal="false"
    :title="$t('formItemInfo')"
    width="60%"
  >
    <el-form
      ref="ruleForm"
      :inline="true"
      :model="dialogForm"
      :rules="formRules"
      :disabled="formDisable"
      label-width="135px"
    >
      <el-form-item :label="$t('formItem')" prop="itemName">
        <el-input v-model="dialogForm.itemName" :disabled="inputDisable" clearable/>
      </el-form-item>
      <el-form-item :label="$t('formGroup')" prop="itemGroup">
        <el-input v-model="dialogForm.itemGroup" clearable/>
      </el-form-item>
      <el-form-item :label="$t('projectCategory')" prop="category">
        <el-select v-model="dialogForm.category" :disabled="inputDisable" filterable clearable>
          <el-option
            v-for="item in categoryList"
            :key="item.id"
            :label="`${$t(item.name)}`"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('application')" prop="apply">
        <el-select v-model="dialogForm.apply" filterable clearable>
          <el-option
            v-for="item in applyList"
            :key="item.id"
            :label="`${$t(item.name)}`"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('fieldType')" prop="dataType">
        <el-select v-model="dialogForm.dataType" filterable clearable @change="clearDataSource">
          <el-option
            v-for="item in dataTypeList"
            :key="item.id"
            :label="`${$t(item.name)}`"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('formWorkplaceResults')" prop="finalResult">
        <el-select v-model="dialogForm.finalResult" filterable clearable>
          <el-option
            v-for="item in finalResultList"
            :key="item.id"
            :label="`${$t(item.name)}`"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('iseffective')" prop="status">
        <el-switch
          v-model="dialogForm.status"
          :active-value="1"
          :inactive-value="0"
          active-color="#13ce66"
          inactive-color="#ff4949"
        />
      </el-form-item>
      <el-form-item
        v-show="dialogForm.dataType != 9"
        :label="$t('whetherToUploadAttachments')"
        prop="attachment">
        <el-switch
          v-model="dialogForm.attachment"
          :active-value="1"
          :inactive-value="0"
          active-color="#13ce66"
          inactive-color="#ff4949"
          size="mini"
        />
      </el-form-item>
      <el-form-item
        v-if="dialogForm.dataType >2&&dialogForm.dataType < 9||dialogForm.judgeType==3"
        :label="$t('dataType')"
        prop="dataSource">
        <!-- input -->
        <el-input
          v-show="dialogForm.dataType >2&&dialogForm.dataType < 8&&dialogForm.judgeType!=3"
          v-model="dialogForm.dataSource"
          clearable/>
        <!-- 单选拉下框 -->
        <el-select
          v-show="dialogForm.dataType == 8||dialogForm.judgeType==3"
          v-model="dialogForm.dataSource"
          filterable
          clearable
        >
          <el-option
            v-for="item in takeOutItemToList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item
        v-show="dialogForm.dataType < 9&&dialogForm.dataType"
        :label="$t('whetherToCheckAutomatically')"
        prop="isCheck">
        <el-switch
          v-model="dialogForm.isCheck"
          :active-value="1"
          :inactive-value="0"
          active-color="#13ce66"
          inactive-color="#ff4949"
          @change="clearSection"
        />
      </el-form-item>
      <el-form-item
        v-show="dialogForm.isCheck"
        :label="$t('judgeType')"
        prop="judgeType">
        <el-select v-model="dialogForm.judgeType" filterable clearable>
          <el-option
            v-for="item in sectionList"
            :key="item.id"
            :label="`${$t(item.name)}`"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item
        v-show="dialogForm.judgeType==1"
        :label="$t('failValue')"
        prop="failValue"
      >
        <el-input v-model="dialogForm.failValue" clearable/>
      </el-form-item>
      <el-form-item :label="$t('belongTo')" prop="belongTo">
        <el-select v-model="dialogForm.belongTo" filterable clearable>
          <el-option
            v-for="item in belongToList"
            :key="item.id"
            :label="`${$t(item.name)}`"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('remark')" prop="remark">
        <el-input v-model="dialogForm.remark" clearable/>
      </el-form-item>
    </el-form>
    <!-- 信息表单部分 -->
    <infomationTable
      :show-table="dialogForm.apply"
      :show-valid="dialogForm.status"
      :table-disabled="formDisable"
      :check-item-conditions="checkItemConditions"/>
    <!-- 区间值表单部分 -->
    <sectionTable
      :show-table="dialogForm.judgeType"
      :check-item-sections="checkItemSections"
      :table-disabled="formDisable"
    />
    <div v-if="btnShow" slot="footer" class="dialog-footer">
      <el-button icon="el-icon-circle-close" @click="closeDialog">{{
        $t("cancel")
      }}</el-button>
      <el-button
        v-btnThrottle="submitForm"
        type="primary"
        icon="el-icon-receiving"
      >{{ $t("save") }}</el-button>
    </div>
  </el-dialog>
</template>
<script>
import eFormApi from '@/api/eForm/selectItemList'
import eFormCheckApi from '@/api/eForm/eFormCheck'
import trackApi from '@/api/production/track'
import networkTips from '@/mixins/networkTips'
import mySetting from '@/mixins/mySetting'
import infomationTable from './informationTable'
import sectionTable from './sectionTable'
export default {
  name: 'AddDialog',
  components: { infomationTable, sectionTable },
  mixins: [networkTips, mySetting],
  props: {
    formDisable: {
      type: Boolean,
      default: false
    },
    btnShow: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      dialogForm: {
        status: 1,
        requestCheckItemSections: [],
        requestCheckItemConditions: []
      },
      isShow: false,
      inputDisable: false,
      dialogFormVisible: false,
      formRules: {
        itemName: [
          { required: true, message: `${this.$t('pleaseInput')}${this.$t('formItem')}`, trigger: 'blur' }
        ],
        category: [
          { required: true, message: `${this.$t('pleaseSelect')}${this.$t('projectCategory')}`, trigger: 'change' }
        ],
        apply: [
          { required: true, message: `${this.$t('pleaseSelect')}${this.$t('application')}`, trigger: 'change' }
        ],
        dataType: [
          { required: true, message: `${this.$t('pleaseSelect')}${this.$t('fieldType')}`, trigger: 'change' }
        ]
      },
      categoryList: [],
      applyList: [],
      dataTypeList: [],
      finalResultList: [],
      belongToList: [],
      takeOutItemToList: [],
      sectionList: [],
      checkItemConditions: [],
      checkItemSections: []
    }
  },
  computed: {},
  watch: {
    'dialogForm.dataType': function(val) {
      if (val === 8 && this.takeOutItemToList.length === 0) {
        this.getTakeOutItemToList()
      }
    },
    'dialogForm.isCheck': function(val) {
      if (val && this.sectionList.length === 0) {
        this.getSection()
      }
    },
    'dialogForm.judgeType': function(val) {
      if (val === 3 && this.takeOutItemToList.length === 0) {
        this.getTakeOutItemToList()
      }
    }
  },
  methods: {
    // 获取表单详情
    async getItemDetail(id) {
      if (id) {
        this.inputDisable = true
        const res = await eFormApi.getItemDetail({ id })
        this.dialogForm = res.data
        this.checkItemConditions = res.data.checkItemConditions
        this.checkItemSections = res.data.checkItemSections
      }
    },
    // 切换清空数据内容
    clearDataSource() {
      this.$set(this.dialogForm, 'dataSource', '')
    },
    // 切换清空区间值
    clearSection() {
      this.$set(this.dialogForm, 'judgeType', '')
      this.$set(this.dialogForm, 'failValue', '')
    },
    // 表单项类型
    async getCategoryList() {
      const res = await eFormCheckApi.getCategoryList({ type: 'item' })
      this.categoryList = res.data
    },
    // 数据类型
    async getFormDataType() {
      const res = await eFormApi.getFormDataType()
      this.dataTypeList = res.data
    },
    // 应用
    async getApplyList() {
      const res = await eFormApi.getApply()
      this.applyList = res.data
    },
    // 归属
    async getBelongTo() {
      const res = await eFormApi.getBelongTo()
      this.belongToList = res.data
    },
    // 点检表结果
    async getFinalResultList() {
      const res = await eFormApi.getFinalResult()
      this.finalResultList = res.data
    },
    // 值 ,区间 ,带出值下拉框
    async getSection() {
      const res = await eFormApi.getSection()
      this.sectionList = res.data
    },
    // 获取带出项数据内容下拉框
    async getTakeOutItemToList() {
      const res = await trackApi.getTakeOutItemToList()
      this.takeOutItemToList = res.data
    },
    // 打开弹窗
    openDialog(id) {
      this.getItemDetail(id)
      this.getCategoryList()
      this.getFormDataType()
      this.getApplyList()
      this.getBelongTo()
      this.getFinalResultList()
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['ruleForm'].clearValidate()
      })
    },
    // 关闭弹窗
    closeDialog() {
      this.$emit('closeDialog')
      Object.assign(this.$data, this.$options.data.call(this))
    },
    // 触发父组件更新
    handleUpdate() {
      this.$emit('initList')
    },
    submitForm() {
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          const isInfo = this.checkItemConditions.length && this.checkItemConditions.some(p => p.condition && p.conditionValue)
          const isQujian = this.checkItemSections.length && this.checkItemSections.some(p => p.conditions && p.min && p.max)
          if (this.dialogForm.apply === 2 && isInfo) {
            this.checkItemConditions.forEach((ele) => {
              ele.id = this.dialogForm.id
            })
            this.dialogForm.requestCheckItemConditions = this.checkItemConditions
          }
          if (this.dialogForm.judgeType === 2 && isQujian) {
            this.checkItemSections.forEach((ele) => {
              ele.id = this.dialogForm.id
            })
            this.dialogForm.requestCheckItemSections = this.checkItemSections
          }
          if (this.dialogForm.id) {
            // 修改
            eFormApi.modify(this.$clearNull(this.dialogForm)).then((res) => {
              this.netTips(res, this.closeDialog, this.handleUpdate)
            })
          } else {
            // this.dialogForm.requestCheckItemSections = this.checkItemSections
            // this.dialogForm.requestCheckItemConditions = this.checkItemConditions
            // 新增
            eFormApi.newAdd(this.$clearNull(this.dialogForm)).then((res) => {
              this.netTips(res, this.closeDialog, this.handleUpdate)
            })
          }
        } else {
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>
<style lang='scss' scoped>
::v-deep .el-form-item {
  width: 48%;
  .el-form-item__content{
    width: calc(100% - 135px);
    .el-select{
      width: 100%;
    }
  }
}
::v-deep .el-switch {
  font-size: 12px;
}
</style>
